<template>
    <div class="container">
        <div class="grid" v-viewer>
            <div class="grid-sizer"></div>
            <div class="gutter-sizer"></div>
        </div>
        <v-button type="warning" @click="loadMore">加载更多</v-button>
    </div>
</template>
<script>
import $ from 'jquery';
import jQueryBridget from 'jquery-bridget';
import Masonry from 'masonry-layout';

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)

export default {
    data() {
        return {
            grid: {},
            gridData: [
                {
                    class_: 'grid-item grid-item--width3',
                    src: '/static/images/7.jpg'
                },
                {
                    class_: 'grid-item grid-item--width',
                    src: '/static/images/1.jpg'
                },
                {
                    class_: 'grid-item grid-item--width',
                    src: '/static/images/2.jpg'
                },
                {
                    class_: 'grid-item grid-item--width',
                    src: '/static/images/3.jpg'
                },
                {
                    class_: 'grid-item grid-item--width',
                    src: '/static/images/4.jpg'
                },
                {
                    class_: 'grid-item grid-item--width',
                    src: '/static/images/5.jpg'
                },
                {
                    class_: 'grid-item grid-item--width',
                    src: '/static/images/6.jpg'
                },
                {
                    class_: 'grid-item grid-item--width2',
                    src: '/static/images/banner01.jpg'
                },
                {
                    class_: 'grid-item grid-item--width',
                    src: '/static/images/13.jpg'
                },
                {
                    class_: 'grid-item grid-item--width',
                    src: '/static/images/12.jpg'
                },
                {
                    class_: 'grid-item grid-item--width',
                    src: '/static/images/11.jpg'
                },
            ],
            imagesLoaded: require('imagesloaded')
        }
    },
    mounted() {
        this.imagesLoaded.makeJQueryPlugin( $ );
        jQueryBridget( 'masonry', Masonry, $ );
        this.grid = $('.grid').masonry({
            itemSelector: '.grid-item',
            columnWidth: '.grid-sizer',
            gutter: '.gutter-sizer',
        });

        this.loadImages();

    },

    methods: {

        loadMore() {
            this.loadImages();
        },

        getOneItem(info) {
            let elem = document.createElement('div');
            elem.className = info.class_;
            let image = new Image();
            image.src = info.src;
            elem.appendChild(image);
            return elem;
        },

        loadImages() {
            let elems = [];
            this.gridData.forEach(info => {
                let elem = this.getOneItem(info);
                elems.push(elem);
            });
            this.grid.append(elems)
                .masonry('appended', elems);

            // 图片加载完成后再触发布局
            let that = this;
            this.grid.imagesLoaded().progress( function() {
                that.grid.masonry('layout');
            });
        }

    }
        
    
}
</script>
<style>
.container {
    background-color: #F5F5F5;
}

.grid {
    width: 100%;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */
.grid-item {
    float: left;
    margin-bottom: 15px;
    border-radius: 5px;
}

.grid-item img {
    width: 100%;
    border-radius: 5px;
}


@media screen and (max-width: 768px) {
    .grid-sizer {
        width: 49%;
    }

    .gutter-sizer {
        width: 2%;
    }

    .grid-item--width { width: 49%; }

    .grid-item--width2 { width: 100%; }

    .grid-item--width3 { width: 100%; }
}

@media screen and (min-width:769px) and (max-width: 992px) {
    .grid-sizer {
        width: 32%;
    }

    .gutter-sizer {
        width: 2%;
    }

    .grid-item--width { width: 32%; }

    .grid-item--width2 { width: 66%; }

    .grid-item--width3 { width: 100%; }
}

@media screen and (min-width:993px) and (max-width: 1200px) {
    .grid-sizer {
        width: 23.5%;
    }

    .gutter-sizer {
        width: 2%;
    }

    .grid-item--width { width: 23.5%; }

    .grid-item--width2 { width: 49%; }

    .grid-item--width3 { width: 74.5%; }

    .grid-item:hover {
        transform: scale(1.05);
        box-shadow: 0 0 15px #A8A8A8;
    }
}

@media screen and (min-width: 1201px) {
    .grid-sizer {
        width: 18.4%;
    }
    .gutter-sizer {
        width: 2%;
    }

    .grid-item--width { width: 18.4%; }

    .grid-item--width2 { width: 38.8%; }

    .grid-item--width3 { width: 59.2%; }

    .grid-item:hover {
        transform: scale(1.05);
        box-shadow: 0 0 15px #A8A8A8;
    }
}

</style>